<template>
  <div class="reqDetailContent">
    <ul>
      <li>
        <span>需求名称</span>
        <span>{{ demandList.demand.demandName }}</span>
      </li>
      <li>
        <span>需求描述</span>
        <span>{{ demandList.demand.demandDescribe }}</span>
      </li>
      <li>
        <span>关联项目</span>
        <span v-if="demandList.project !== undefined || null">{{
          demandList.project.projectName
        }}</span>
        <span v-else>暂无项目</span>
      </li>
      <li>
        <span>项目附件</span>
        <a
          v-if="demandList.project !== undefined || null"
          :href="demandList.project.docFilesUrl"
          class="textUpload"
          >点击下载</a
        >
        <span v-else>文件暂缺</span>
      </li>
      <li>
        <span>需求分类</span>
        <span>{{ demandList.relation.value }}</span>
      </li>
      <li>
        <span>发布时间</span>
        <span>{{ demandList.demand.gmtCreated }}</span>
      </li>
      <li>
        <span>状态</span>
        <span v-if="demandList.project !== undefined || null">已领取</span>
        <span v-else>未领取</span>
      </li>
      <li>
        <span>项目评分</span>
        <span
          v-if="demandList.project !== undefined || null"
          @click="projectAssess(demandList.project)"
        >
          <i
            class="el-icon-star-on"
            v-for="(item, index) in 3"
            :key="'ite' + index"
            style="color: rgb(246, 177, 37)"
          ></i>
          <i
            class="el-icon-star-off"
            v-for="(item, index) in 2"
            :key="'it' + index"
          ></i>
        </span>
        <span v-else>暂无项目</span>
      </li>
    </ul>
     <!-- 成员分布 -->
    <div class="personAssign">
      <h2>成员分配</h2>
      <ul v-if="projectId !== ''">
        <li v-for="(item, index) in person" :key="index">
          <span>{{ item[0] }}</span>
          <span>
            <span v-for="(it, ind) in item[1]" :key="ind">{{ it.name }}</span>
          </span>
        </li>
      </ul>
       <div v-else>没有项目|暂无人员分配</div>
    </div>
    <!-- 添加附件 -->
    <div class="appendix">
      <h2>文件附录</h2>
      <ul>
        <li>
          <span><i class="el-icon-paperclip"></i>需求附件</span>
          <a
            v-if="demandList.demand.docFilesUrl !== ''"
            :href="demandList.demand.docFilesUrl"
            class="textUpload"
            >点击下载</a
          >
          <span v-else>文件暂缺</span>
        </li>
      </ul>
    </div>
    <!-- 评论 -->
    <div class="comment">
      <h2>
        <span>评论</span>
        <span><i class="el-icon-edit"></i></span>
      </h2>
      <!-- 一级评论 -->
      <div class="commentInput">
        <el-avatar icon="el-icon-user-solid"></el-avatar>
        <el-input placeholder="请输入内容" v-model="firstComment" ></el-input>
        <el-button size="mini" type="primary" @click="commentFirst()">评论</el-button>
      </div>
      <div v-if="firstCommentList.length === 0">
        <el-empty description="暂无评论信息..."></el-empty>
      </div>
      <div v-else>
        <CommentItemMobel
          v-for="(item, index) in firstCommentList" :comment = "item"
          :key="index"
        ></CommentItemMobel>
      </div>
    </div>
  </div>
</template>

<script>
import CommentItemMobel from "../../../components/CommentItemMobel.vue";
import { ReqDemandDetail, ReqProjectMan,ReqAddComment,ReqCommentParent,ReqSonFromParent} from "../../../request/index";
export default {
  components: {
    CommentItemMobel,
  },
  data() {
    return {
      demandList: {
        demand: {
          demandName: "111",
        },
        relation: {
          value: "1",
        },
      },
      projectId: "",
      firstComment:'',
      person: [],
      firstCommentList:[]
    };
  },
  methods: {
    // 企业用户是否可以对项目成员管理?
    // enterPersonAssign() {
    //   this.$router.history.push("/self/manage/personAssignMobel?" + `id=${id}`);
    // },
    // 因为项目评分需要项目id 项目的名称
    projectAssess(data) {
      console.log(data,"项目信息")
      this.$router.push({
        path: "/self/company/projectAssessMobel",
        query: { data },
      });
    },
    // 根据需求id去查询需求详情
    async initDemand() {
      let query = this.$router.history.current.query.id;
      let res = await ReqDemandDetail(query);
      this.demandList = res.demandVo;
      if (res.demandVo.project !== undefined) {
        this.projectId = res.demandVo.project.id;
      }
      // 有项目id直接先请求项目人员信息
      if (this.projectId !== "") {
        this.ResProjectMan();
      }
      console.log(res);
    },
    // 根据项目id去查找项目人员分配
    async ResProjectMan() {
       let data = {
        projectId: this.projectId,
      };
      let man = await ReqProjectMan(data);
      const { scoreVo } = man;
      let map = new Map();
      scoreVo.forEach((item) => {
        if (!map.has(item.position)) {
          map.set(item.position, [item]);
        } else {
          map.get(item.position).push(item);
        }
      });
      this.person = Array.from(map);
    },
     // 发布评论
     async commentFirst() {
      let query = this.$router.history.current.query.id;
      if(this.firstComment.trim().length === 0) {
        this.$message({
          type:"warning",
          message: '请输入内容'
        })
      }else {
        let formdata = new FormData();
        formdata.append("contend",this.firstComment)
        formdata.append("demandId",query)
        formdata.append("parentId",0)
        formdata.append("pusherId",sessionStorage.getItem("id"))
        const resultData = await ReqAddComment(formdata)
        if(resultData.msg=="success"){
           this.$message({
          type:"success",
          message: '评论成功'
        })
        this.firstComment =''
        }
      }
    },
    // 获取一级评论
    async getFirstComment() {
      const query = this.$router.history.current.query;
      const resultData = await ReqCommentParent({
        demandId: query.id,
        limit: 1000,
        page: 1,
      });
      const {
        remarks: { list },
      } = resultData;
      this.firstCommentList = list;
      // console.log("this.firstCommentList",this.firstCommentList);
    },
  },
  created() {
    // 初始化需求信息
    this.initDemand();
    this.getFirstComment();
  },
};
</script>

<style scoped>
@import url("~@/assets/styles/manage/reqDetailMobel.css");
</style>
